<script lang="ts" setup>
import type { TaskResourceList } from '@/types/scheduler';

interface Props {
  dataResources?: TaskResourceList;
}

interface Header {
  key?: string;
  value?: string;
  title?: string;
  align?: 'start' | 'end' | 'center';
}

const phaseTaskColor = (task_phase: string): string => {
  switch (task_phase) {
    case 'CentralSubmitted':
    case 'CentralWrapData':
    case 'CentralScheduled':
    case 'CentralDispatch':
    case 'ClusterCreated':
      return 'blue';
    case 'ClusterPending':
    case 'ClusterRunning':
      return 'yellow';
    case 'ClusterCompleted':
      return 'green';
    case 'ClusterFailed':
    case 'Unknown':
      return 'red';
    default:
      return 'grey';
  }
};

const phaseTaskText = (task_phase: string): string => {
  switch (task_phase) {
    case 'CentralSubmitted':
      return '任务已提交到中央';
    case 'CentralWrapData':
      return '中央包装数据中';
    case 'CentralScheduled':
      return '中央调度中';
    case 'CentralDispatch':
      return '中央分发中';
    case 'ClusterCreated':
      return '任务已于集群创建';
    case 'ClusterPending':
      return '任务于集群挂起';
    case 'ClusterRunning':
      return '任务运行中';
    case 'ClusterCompleted':
      return '任务已完成';
    case 'ClusterFailed':
      return '任务失败';
    case 'Unknown':
      return '未知状态';
    default:
      return '未知状态';
  }
};

const { dataResources = [] } = defineProps<Props>();

const headers = [
  { title: '序号', key: 'index', align: 'center' },
  {
    title: '任务名',
    align: 'center',
    sortable: false,
    key: 'task_name',
    value: 'task_name'
  },
  { title: '调度器名', key: 'scheduler_name', align: 'center' },
  { title: '所在集群名', key: 'cluster_name', align: 'center' },
  { title: '任务状态', key: 'task_phase', align: 'center' },
  { title: '任务副本数', key: 'task_replica', align: 'center' },
  { title: 'CPU资源使用量(cores)', key: 'cpu_total_usage', align: 'center' },
  { title: 'GPU资源使用量(num)', key: 'gpu_total_usage', align: 'center' },
  { title: '内存资源使用量(MB)', key: 'memory_total_usage', align: 'center' },
  // { title: '创建时间', key: 'create_at', align: 'center' },
  { title: '运行时间(s)', key: 'duration', align: 'center' }
] as Header[];
</script>

<template>
  <v-data-table :headers="headers" :items="dataResources">
    <template #item.index="{ index }">
      {{ index + 1 }}
    </template>

    <template #item.task_phase="{ item }">
      <div class="flex items-center">
        <v-chip :color="phaseTaskColor(item.task_phase)">
          {{ phaseTaskText(item.task_phase) }}
        </v-chip>
      </div>
    </template>

    <template #item.cpu_total_usage="{ item }">
      {{ item.cpu_total_usage.toFixed(2) }}
    </template>

    <template #item.gpu_total_usage="{ item }">
      {{ item.gpu_total_usage.toFixed(2) }}
    </template>

    <template #item.memory_total_usage="{ item }">
      {{ item.memory_total_usage.toFixed(2) }}
    </template>
  </v-data-table>
</template>

<style scoped>
.custom-table /deep/ .v-data-table__th {
  font-size: 13px;
}
</style>
